<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>购物车</title>
    <meta name="keywords" content="KEYWORDS..."/>
    <meta name="description" content="DESCRIPTION..."/>
    <meta name="author" content="DeathGhost"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name='apple-touch-fullscreen' content='yes'>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <link rel="icon" href="/1/images/icon/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/1/images/icon/apple-touch-icon-57x57-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/1/images/icon/apple-touch-icon-120x120-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="196x196" href="/1/images/icon/apple-touch-icon-196x196-precomposed.png">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="/1/css/style.css"/>
    <script src="/1/js/jquery.js"></script>
    <script src="/vendor/layer/layer.js"></script>
    <script src="/js/jquery.cookie.js"></script>
    <script>
        $(document).ready(function () {
            //show or hide:delBtn
            $(".edit").toggle(function () {
                $(this).parent().siblings("dd").find(".delBtn").fadeIn();
                $(this).html("完成");
                $(".numberWidget").show();
                $(".priceArea").hide();
            }, function () {
                $(this).parent().siblings("dd").find(".delBtn").fadeOut();
                $(this).html("编辑");
                $(".numberWidget").hide();
                $(".priceArea").show();
            });
        });
    </script>
</head>
<body>
<!--header-->
<header>
    <a href="javascript:history.go(-1);" class="iconfont backIcon">&#60;</a>
    <h1>购物车</h1>
</header>
<div style="height:1rem;"></div>
<dl class="cart">
    <dt>
        {{--<label><input type="checkbox"/>全选</label>--}}
        <a class="edit">编辑</a>
    </dt>
    <div id="cart-wrapper">
        @if (count($goodsList) == 0)
            <p style="text-align:center;padding:.5rem 0;font-size:16px;color:#64ab5b">空 空 如 也 ~</p>
        @else
            @foreach($goodsList as $goods)
                <dd>
                    <a class="goodsPic"><img src="{{preg_replace('/,.*/', '', $goods['pic'])}}"/></a>
                    <div class="goodsInfor">
                        <h2>
                            <a>{{$goods['name']}}</a>
                            <span class="cart-goods-num">{{$goods['cart_num']}}</span>
                        </h2>
                        <div class="priceArea">
                            <strong>{{$goods['price']}}</strong>
                            <del>{{$goods['origin_price']}}</del>
                        </div>
                        <div class="numberWidget" data-id="{{$goods['id']}}" data-price="{{$goods['price']}}">
                            <input type="button" value="-" class="minus" onclick="cartChange(this, -1)" />
                            <input type="text" value="{{$goods['cart_num']}}" disabled  class="number"/>
                            <input type="button" value="+" class="plus" onclick="cartChange(this, 1)" />
                        </div>
                    </div>
                    <!--<a class="delBtn">删除</a>-->
                </dd>
            @endforeach
        @endif
    </div>
</dl>
<!--bottom nav-->
<div style="height:1rem;"></div>
<aside class="btmNav">
    <a>合计：￥<span id="total-price">{{$totalMoney}}</span></a>
    <a onclick="goConfirmOrder()" style="background:#64ab5b;color:white;text-shadow:none;">立即下单</a>
</aside>
<script>
    var cartGoods = {};
    var storageKey = 'cart_goods';
    var totalPrice = parseFloat('{{$totalMoney}}');

    $(function () {
        cartGoods = $.cookie(storageKey) ? JSON.parse($.cookie(storageKey)) : {};
    });

    function cartChange(obj, num) {
        var itemId = parseInt($(obj).parent().attr('data-id'));
        var itemPrice = parseFloat($(obj).parent().attr('data-price'));
        var itemNum = parseInt($(obj).siblings('.number').val());
        itemNum += num;
        totalPrice += itemPrice * num;
        $('#total-price').text(totalPrice);

        if (itemNum <= 0) {
            $(obj).parents('dd').remove();
            delete cartGoods[itemId];
        } else {
            cartGoods[itemId] = itemNum;
            $(obj).siblings('.number').val(itemNum);
            $(obj).parents('.goodsInfor').children().find('.cart-goods-num').text(itemNum);
        }
        $.cookie(storageKey, JSON.stringify(cartGoods), {expires: 1, path: '/'});
    }

    function goConfirmOrder() {
        if (totalPrice <= 0) {
            layer.msg('请先在购物车加入商品');
            return;
        }
        location.href = '/home/order/confirmOrder';
    }
</script>
</body>
</html>
